// import Home from './components/Home';
// import About from './components/About';
import { Link, Route, Redirect } from 'react-router-dom'
import Home from './componetns2/Home'
import Login from './componetns2/Login';
import './App.css';

function App() {
  return (
    <div className="App">
      {/* 案例 */}
      <Route path = "/home" component = { Home }/>
      <Route path = "/login" component = { Login }/>

      <Redirect to = "/home" from = "/"/>


      {/* <Link to="/home">home</Link>
      <Link to="/about">about</Link> */}

      {/* 视图  Route（三种方式） */}
      {/* 1. component */}
      {/* <Route path = "/home" component = { Home }/>
      <Route path = "/about" component = { About }/> */}

      {/* 2. render 可以做组合渲染 */}
      {/* <Route path="/home" render={() => {
        return <div>
          <h3>面包屑导航</h3>
          <Home/>
        </div>
      }} />

      <Route path="/about" render={() => {
        return <div>
          <h3>面包屑导航</h3>
          <About />
        </div>
      }} /> */}

      {/* 3. 标签的形式 也可以做组合渲染 */}
      {/* <Route path="/home">
        <h2>1111111</h2>
        <Home/>
      </Route>
      <Route path="/about">
        <About/>
      </Route> */}
    </div>
  )
}

export default App;
